<template>
	<view style="height: 100%;">
		<view v-if="list.length === 0" class="empty">
			地址列表为空
		</view>
		<radio-group @change="radioChange">
			<view v-for="(item, index) in list">
				<view class="base-layout">
					<view class="radio-layout">
						<radio :value="item.id" :checked="item.selected" />
					</view>
					<view style="display: flex; flex-direction: column; width: 80%; height: 100%;">
						<view style="display: flex; flex-direction: row;">
							<view class="text1">{{item.name}} {{item.phone}}</view>
							<view class="text3" v-if="item.isDefault === true">默认</view>
						</view>
						<view class="text2">{{item.province}}{{item.city}}{{item.area}}{{item.detail}}</view>
					</view>
					<view class="icon-layout">
						<image class="image-layout" @click="edit(item)" src="../../../static/weapp/ic_edit.png"/>
					</view>
				</view>
			</view>
		</radio-group>
		<view class="button" @click="gotoEdit">
			添加地址
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	import { addressList } from '../user/address.js'
	
	export default {
		data() {
			return {
				list: addressList,
			}
		},
		globalData: {
			selected: null
		},
		methods: {
			radioChange(evt) {
				getApp().globalData.selected = evt.detail.value;
				for (var index in this.list) {
					var item = this.list[index];
					if (item.id == getApp().globalData.selected) {
						item.selected = true;
						break;
					}
				}
			},
			edit(item) {
				uni.navigateTo({
					url: '/pages/weapp/user/address-edit?address=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			gotoEdit() {
				uni.navigateTo({
					url: '/pages/weapp/user/address-edit'
				})
			},
			async getAddressList() {
				var res = await new Promise((resolve, reject) => {
					http.get('/address/list').then(res => {
						resolve(res.data)
					})
				})
				if (res.code == 200) {
					this.list.splice(0)
					for (var index in res.data) {
						var item = res.data[index];
						if (getApp().globalData.selected != null) {
							if (getApp().globalData.selected == item.id) {
								item.selected = true;
							}
						} else {
							if (item.isDefault) {
								item.selected = true;
								getApp().globalData.selected = item.id;
							}
						}
						this.list.push(item);
					}
				}
			}
		},
		onShow() {
			this.getAddressList();
		}
	}
</script>

<style>
	.base-layout {
		display: flex;
		height: 90px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.empty {
		font-size: 16px;
		color: rgb(88, 88, 88);
		text-align: center;
		margin-top: 50px;
	}
	.radio-layout {
		display: flex;
		flex-direction: column;
		width: 10%; 
		height: 100%; 
		justify-content: center; 
		text-align: center;
		margin-left: 10px;
	}
	.text1 {
		font-size: 18px;
		height: 30%;
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.text2 {
		font-size: 14px;
		height: 60%;
		margin-top: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.text3 {
		width: 50px;
		font-size: 16px;
		height: 24px;
		color: white;
		background-color: red;
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 5px;
		border-radius: 12px;
		text-align: center;
	}
	.icon-layout {
		display: flex;
		flex-direction: column;
		width: 10%; 
		height: 100%; 
		justify-content: center; 
		text-align: center;
		margin-right: 20px;
	}
	.image-layout {
		width: 48rpx;
		height: 48rpx;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
	}
	.button {
		display: flex;
		position: fixed;
		background-color: #1aad19;
		font-size: 20px;
		color: white;
		left: 10px;
		right: 10px;
		border-radius: 20px;
		bottom: 30px;
		padding-top: 10px;
		padding-bottom: 10px;
		justify-content: center;
	}
	
</style>